Netflix Clone - React Tutorial - Styled Components - Firebase (Firestore & Auth)

2,93,659 views • Premiered on 15-Sep-2020 • ✅ Subscribe: https://bit.ly/CognitiveSurge ☕ Buy me a coffee: https://www.buymeacoffee.com/karlhadwen 🐤 Follow me on Twitter: https://twitter.com/karlhadwen 🧨 GitHub Repo (remember to star!) https://github.com/karlhadwen/netflix 💻 My Tech Gear: https://kit.co/karlhadwen 👊 Discord (tech questions, resources, and general chit-chat!): https://discord.gg/3jTSgft 💰 Bitcoin address: 3GhoHmF4qPHT3bH59t8DuPvCTZwbzGcj5g -- The stack you will use: React (custom hooks, context, portals), Firebase (Firestore/auth), Compound & Styled components! In this React Tutorial, we will build a Netflix clone! This React project has multiple pages: Home, Browse (which uses Firebase authentication), sign in, and sign up. The sign in will connect to Firebase when a user tries to sign in, and when a user signs up, we will use Firebase auth to store the user in the Firebase auth database. I built this app using React and uses Styled Components for all the styling we implement. You will need knowledge of React (useEffect, useState, useContext) and you will need JavaScript knowledge for using higher order functions such as map, filter, reduce, and find. We will use Fuse.js for live search, and we will test all our components using React Testing Library. And of course we will use React router for navigation! -- ⌛Timestamps 00:00:00 - Overview/demo 00:04:30 - Architecture 00:08:08 - Project dependencies 00:10:30 - Installing create react app 00:13:03 - Project cleanup 00:21:41 - Yarn/npm port tip 00:24:35 - Creating files/folders 00:29:54 - Creating the Jumbotron component 00:55:19 - Styled components GlobalStyles 00:57:51 - Implementing Normalize.css 00:58:55 - Installing ESLint, Prettier 01:01:33 - Item component 01:03:59 - Item component direction prop 01:05:20 - Container derivative component 01:07:22 - Modules, errors 01:12:00 - Footer component 01:30:28 - Accordion component 01:34:37 - useContext for Compound Components 01:43:29 - VSCode tip for importing 01:55:59 - Accordion component body 02:00:07 - Accordion component review 02:04:14 - Opt-form component creation 02:16:55 - Opt-form component review 02:22:06 - Constants - routes 02:28:57 - Pages: Home, Browse, SignIn, SignUp 02:31:04 - Creating React Router Routes 02:33:23 - Header component 03:09:10 - Template review 03:10:16 - Firebase connection 03:24:14 - React Context for Firebase 03:28:56 - SignIn Page 03:54:52 - Firebase top level authentication 03:58:56 - Firebase console authentication 04:00:25 - Debugging error auth (if user is in the db or not) 04:01:51 - SignUp Page 04:09:22 - Registration page, routes debugging 04:14:42 - Navigation 04:16:00 - Helpers: routes (React router auth) 04:26:21 - Protect routes 04:36:24 - Creating an auth listener (custom hook) 04:40:00 - Tip around authentication state changing 04:44:19 - Helpers routes review 04:47:18 - Browse page (categories films & series) component 04:49:32 - Custom hook:browse page 04:58:02 - Utils directory and setup 05:05:39 - Browse container 05:07:19 - Profiles container 05:12:34 - Profiles component 05:22:06 - Loading profile component 05:31:54 - Spinner review 05:43:19 - Header profile 06:10:50 - Header profile: dropdown, chevron 06:15:45 - Header search styling 06:29:55 - Header play button style 06:35:00 - Card list (categories, slides) - films & series logic 06:55:33 - Entities logic start 06:58:18 - Player component and Card component styling 07:00:58 - Movie recommendations 07:01:01 - Feature component (showing) 07:03:49 - Passing props into our Feature (item obj) 07:06:16 - More styling on the card style 07:20:17 - Debugging the slides 07:30:18 - Debugging play button and card 07:33:07 - Player component 07:48:25 - Review player video 07:49:00 - Live search using Fuse.js 07:53:09 - Review our project! 07:56:44 - Testing setup 08:02:39 - Player test 08:16:04 - Footer test 08:20:19 - Accordion test 08:27:44 - Card test 08:37:24 - Feature test 08:41:24 - Form test 08:49:24 - Opt form test 08:52:04 - Player test 08:52:39 - Loading test 08:57:09 - Profile test 09:01:29 - Jumbotron test 09:06:04 - Header test 09:23:19 - Home page test 09:32:44 - Profiles test 09:34:24 - Adding test-ids to Profiles 09:35:39 - Selection filter test 09:45:24 - SignIn Test 09:55:49 - SignUp Test 09:59:29 - We are done! Review and sign off! -- 🖥️ Technologies used Languages/Libraries: JavaScript, React, React Hooks, React Testing Library, Styled Components and lastly the design pattern of Compound Components. -- 🎣react tutorial,reactjs tutorial for beginners,react firebase tutorial,styled components,firebase tutorial,react hooks tutorial,building todoist,react js project from scratch,react crash course,react context tutorial,react router dom,react tutorial for beginners,react js full course,reactjs tutorial for beginners 2021, clever programmer

Karl Hadwen

32.6K subscribers

LEEDS

Netflix Clone - React Tutorial - Styled Components - Firebase (Firestore & Auth)

2,93,659 views2.9 lakh views

Premiered on 15-Sep-2020

Karl Hadwen

32.6K subscribers

✅ Subscribe: https://bit.ly/CognitiveSurge ☕ Buy me a coffee: https://www.buymeacoffee.com/karlhadwen 🐤 Follow me on Twitter: https://twitter.com/karlhadwen 🧨 GitHub Repo (remember to star!) https://github.com/karlhadwen/netflix 💻 My Tech Gear: https://kit.co/karlhadwen 👊 Discord (tech questions, resources, and general chit-chat!): https://discord.gg/3jTSgft 💰 Bitcoin address: 3GhoHmF4qPHT3bH59t8DuPvCTZwbzGcj5g -- The stack you will use: React (custom hooks, context, portals), Firebase (Firestore/auth), Compound & Styled components! In this React Tutorial, we will build a Netflix clone! This React project has multiple pages: Home, Browse (which uses Firebase authentication), sign in, and sign up. The sign in will connect to Firebase when a user tries to sign in, and when a user signs up, we will use Firebase auth to store the user in the Firebase auth database. I built this app using React and uses Styled Components for all the styling we implement. You will need knowledge of React (useEffect, useState, useContext) and you will need JavaScript knowledge for using higher order functions such as map, filter, reduce, and find. We will use Fuse.js for live search, and we will test all our components using React Testing Library. And of course we will use React router for navigation! -- ⌛Timestamps 00:00:00 - Overview/demo 00:04:30 - Architecture 00:08:08 - Project dependencies 00:10:30 - Installing create react app 00:13:03 - Project cleanup 00:21:41 - Yarn/npm port tip 00:24:35 - Creating files/folders 00:29:54 - Creating the Jumbotron component 00:55:19 - Styled components GlobalStyles 00:57:51 - Implementing Normalize.css 00:58:55 - Installing ESLint, Prettier 01:01:33 - Item component 01:03:59 - Item component direction prop 01:05:20 - Container derivative component 01:07:22 - Modules, errors 01:12:00 - Footer component 01:30:28 - Accordion component 01:34:37 - useContext for Compound Components 01:43:29 - VSCode tip for importing 01:55:59 - Accordion component body 02:00:07 - Accordion component review 02:04:14 - Opt-form component creation 02:16:55 - Opt-form component review 02:22:06 - Constants - routes 02:28:57 - Pages: Home, Browse, SignIn, SignUp 02:31:04 - Creating React Router Routes 02:33:23 - Header component 03:09:10 - Template review 03:10:16 - Firebase connection 03:24:14 - React Context for Firebase 03:28:56 - SignIn Page 03:54:52 - Firebase top level authentication 03:58:56 - Firebase console authentication 04:00:25 - Debugging error auth (if user is in the db or not) 04:01:51 - SignUp Page 04:09:22 - Registration page, routes debugging 04:14:42 - Navigation 04:16:00 - Helpers: routes (React router auth) 04:26:21 - Protect routes 04:36:24 - Creating an auth listener (custom hook) 04:40:00 - Tip around authentication state changing 04:44:19 - Helpers routes review 04:47:18 - Browse page (categories films & series) component 04:49:32 - Custom hook:browse page 04:58:02 - Utils directory and setup 05:05:39 - Browse container 05:07:19 - Profiles container 05:12:34 - Profiles component 05:22:06 - Loading profile component 05:31:54 - Spinner review 05:43:19 - Header profile 06:10:50 - Header profile: dropdown, chevron 06:15:45 - Header search styling 06:29:55 - Header play button style 06:35:00 - Card list (categories, slides) - films & series logic 06:55:33 - Entities logic start 06:58:18 - Player component and Card component styling 07:00:58 - Movie recommendations 07:01:01 - Feature component (showing) 07:03:49 - Passing props into our Feature (item obj) 07:06:16 - More styling on the card style 07:20:17 - Debugging the slides 07:30:18 - Debugging play button and card 07:33:07 - Player component 07:48:25 - Review player video 07:49:00 - Live search using Fuse.js 07:53:09 - Review our project! 07:56:44 - Testing setup 08:02:39 - Player test 08:16:04 - Footer test 08:20:19 - Accordion test 08:27:44 - Card test 08:37:24 - Feature test 08:41:24 - Form test 08:49:24 - Opt form test 08:52:04 - Player test 08:52:39 - Loading test 08:57:09 - Profile test 09:01:29 - Jumbotron test 09:06:04 - Header test 09:23:19 - Home page test 09:32:44 - Profiles test 09:34:24 - Adding test-ids to Profiles 09:35:39 - Selection filter test 09:45:24 - SignIn Test 09:55:49 - SignUp Test 09:59:29 - We are done! Review and sign off! -- 🖥️ Technologies used Languages/Libraries: JavaScript, React, React Hooks, React Testing Library, Styled Components and lastly the design pattern of Compound Components. -- 🎣react tutorial,reactjs tutorial for beginners,react firebase tutorial,styled components,firebase tutorial,react hooks tutorial,building todoist,react js project from scratch,react crash course,react context tutorial,react router dom,react tutorial for beginners,react js full course,reactjs tutorial for beginners 2021, clever programmer

COVID-19 safety and care Featured Get the right information on COVID-19 safety and care. #ExpertsKiSuno

COVID-19 news

Netflix Clone - React Tutorial - Styled Components - Firebase (Firestore & Auth)

Netflix Clone - React Tutorial - Styled Components - Firebase (Firestore & Auth)

Chapters

Overview/demo

Architecture

Project dependencies

Installing create react app

Project cleanup

Yarn/npm port tip

Creating files/folders

Creating the Jumbotron component

Styled components GlobalStyles

Implementing Normalize.css

Installing ESLint, Prettier

Item component

Item component direction prop

Container derivative component

Modules, errors

Footer component

Accordion component

useContext for Compound Components

VSCode tip for importing

Accordion component body

Accordion component review

Opt-form component creation

Opt-form component review

Constants - routes

Pages: Home, Browse, SignIn, SignUp

Creating React Router Routes

Header component

Template review

Firebase connection

React Context for Firebase

SignIn Page

Firebase top level authentication

Firebase console authentication

Debugging error auth (if user is in the db or not)

SignUp Page

Registration page, routes debugging

Navigation

Helpers: routes (React router auth)

Protect routes

Creating an auth listener (custom hook)

Tip around authentication state changing

Helpers routes review

Browse page (categories films & series) component

Custom hook:browse page

Utils directory and setup

Browse container

Profiles container

Profiles component

Loading profile component

Spinner review

Header profile

Header profile: dropdown, chevron

Header search styling

Header play button style

Card list (categories, slides) - films & series logic

Entities logic start

Player component and Card component styling

Movie recommendations

Feature component (showing)

Passing props into our Feature (item obj)

More styling on the card style

Debugging the slides

Debugging play button and card

Player component

Review player video

Live search using Fuse.js

Review our project!

Testing setup

Player test

Footer test

Accordion test

Card test

Feature test

Form test

Opt form test

COVID-19 safety and care
Featured

Get the right information on COVID-19 safety and care. #ExpertsKiSuno